var data = [
    {
        "pic": "img/1.jpg"
    },
    {
        "pic": "img/2.jpg"
    },
    {
        "pic": "img/3.jpg"
    },
    {
        "pic": "img/4.jpg"
    },
    {
        "pic": "img/5.jpg"
    },
    {
        "pic": "img/1.jpg"
    }
]

var _box = document.getElementById("box");
var _boxs = document.createElement("div");
var num = data.length * 960;   
_boxs.style.width = ""+num+"px";


for (var i=0; i<data.length;i++) {
    _boxs.appendChild(a(data[i]));
}
function a (i) {
    var _imgs = document.createElement("img");
    _imgs.src = i.pic;
    _imgs.className = "bimg";
    return _imgs;
}
_boxs.className = "boxs";
_box.appendChild(_boxs);

var _choose = document.getElementById("choose");

for (var i = 0;i<data.length-1;i++) {
    _choose.appendChild(b(i));
}
function b(i) {
    var _span = document.createElement("span");
    _span.className = "chooseSpan";
    return _span;
}


function lb(k) {
    _boxs.style.left = k*960*(-1)+"px";
}


var _img = document.getElementsByClassName("bimg");
var k = 0;
var timer = setInterval(function(){   
    if (k<_img.length-1) {  
        c(k);  
        k++;
        lb(k);              
    }
    else {
        k=0;  
        k++;
        lb(k);
        c(0);   
    }
},2000)





function c(i) {
    for (var j = 0;j<_chooseSpans.length;j++) {
        _chooseSpans[j].style.background = "white";
    }
        _chooseSpans[i].style.background = "orange";
}  



var _chooseSpans = document.getElementsByClassName("chooseSpan");
for (var i = 0; i<_chooseSpans.length;i++) {
(function (i) {
    _chooseSpans[i].onclick = function () {
        for (var j = 0;j<_chooseSpans.length;j++) {
            _chooseSpans[j].style.background = "white";
        }
            _chooseSpans[i].style.background = "orange";
            lb(i);
            k=i;
    }   
}(i))
}

var _mobileLeft = document.getElementsByClassName("mobile-left")[0];
var _mobileRight = document.getElementsByClassName("mobile-right")[0];

(function () {
    _mobileLeft.onclick = function () {
        if (k>0) {
            --k;
            console.log(k);
            lb(k);
            c(k);
        }
    }
    _mobileRight.onclick = function () {
        if (k<4) {
        ++k;
        console.log(k);
        lb(k);
        c(k);
    }
    }
}())